<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>自定义（能填写）</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
</body>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
	renderer: 'canvas',
	useDirtyRect: false
});

// 这个SVG 文件是在https://c.runoob.com/more/svgeditor/上绘制的
var svg = `<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <rect name="re1_1" id="svg_1" height="30" width="43" y="43.5" x="50" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <rect name="re2_1" id="svg_2" height="30" width="43" y="134.5" x="50" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <rect name="re3_1" id="svg_3" height="30" width="43" y="224.25" x="50" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <rect name="re4_1" id="svg_4" height="30" width="43" y="313.5" x="50" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <ellipse name="el1_2" ry="20" rx="23" id="svg_11" cy="58.5" cx="200" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <ellipse name="el2_2" ry="20" rx="23" id="svg_12" cy="149.5" cx="200" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <ellipse name="el3_2" ry="20" rx="23" id="svg_13" cy="239.25" cx="200" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <ellipse name="el4_2" ry="20" rx="23" id="svg_14" cy="328.5" cx="200" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <rect name="re1_3" id="svg_7" height="30" width="50" y="43.5" x="293.5" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <rect name="re2_3" id="svg_8" height="30" width="50" y="134.5" x="293.5" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <rect name="re3_3" id="svg_9" height="30" width="50" y="224.25" x="293.5" stroke-dasharray="2,2" stroke="#000" fill="none"/>
  <rect name="re4_3" id="svg_10" height="30" width="50" y="313.5" x="293.5" stroke-dasharray="2,2" stroke="#000" fill="none"/>
 </g>

</svg>
`;

var obj_user = {
	're1_1': '张三',
	're2_1': '李四',
	'el1_2': '圆1',
}
//获取输入的字符
function getPrompt(name){
	var str = prompt("请输入你的名字","Tom");
	if (str != null && str != ""){
		obj_user[name] = str;
		myChart.setOption(option);
	}
}

echarts.registerMap('simple_svg', { svg: svg });
var option = {
	geo: {
		map: 'simple_svg',
		selectedMode: 'multiple',
		nameMap: {
			're1_1': '张三',
		},
		label: {
			show: true,
			formatter: function(p){
				// console.log(p);
				if(obj_user[p.name] === undefined || !obj_user[p.name]){
					// return p.name;
					return '--';
				}else{
					return obj_user[p.name];
				}
			}
		},
		itemStyle: {
			color: '#ccc',
			borderType: 'solid',
		},
	}
};
myChart.setOption(option);

myChart.on('geoselectchanged', function (params) {
	// console.log(params);
	getPrompt(params.name);
});

// if (option && typeof option === 'object') {
// 	myChart.setOption(option);
// }
// window.addEventListener('resize', myChart.resize);
</script>
</html>